<!--发电详情-->
<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="风场名称">
              <j-select-depart placeholder="请选择风场名称" v-model="orgName" id="orgName" @change="changeOrgName" />
            </a-form-item>
          </a-col>
             <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="时间">
                <j-date placeholder="请选择时间" v-model="dataTime" id="dataTime" @change="changeDataTime"></j-date>
              </a-form-item>
            </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="search" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              <!-- <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
              </a> -->
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
      </a-dropdown>
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <!-- <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a> -->
      </div>
     <!-- 操作 -->
      <a-spin :spinning="flag" >
    <a-card
      style="margin-top: 24px"
      :bordered="false"
      :tabList="tabList"
      :activeTabKey="activeTabKey"
      @tabChange="(key) => onTabChange(key, 'activeTabKey')"
      
    >
   
      <a-table
        v-if="activeTabKey === '1'"
        :columns="columns"
        :dataSource="day"
        :pagination="true"
         :loading="loading"
        bordered
      >
      </a-table>
      <a-table
        v-if="activeTabKey === '2'"
        :columns="columns"
        :dataSource="mon"
        :pagination="true"
         :loading="loading"
         bordered
      >
      </a-table>
      <a-table
        v-if="activeTabKey === '3'"
        :columns="columns"
        :dataSource="year"
        :pagination="true"
         :loading="loading"
         bordered
      >
      </a-table>
    </a-card>
     </a-spin>
    </div>

    <detail-modal ref="modalForm" @ok="modalFormOk"></detail-modal>
  </a-card>
</template>

<script>

  import '@/assets/less/TableExpand.less'
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import DetailModal from './modules/DetailModal'
  import JSelectDepart from '@/components/jeecgbiz/JSelectDepart'
  import { httpAction, getAction } from '@/api/manage'
  import store from '@/store'
  import JDate from '@/components/jeecg/JDate.vue'
  import Area from '@/components/_util/Area'
  import {filterMultiDictText} from '@/components/dict/JDictSelectUtil'
  import {Time} from '@/utils/time'

  export default {
    name: 'DetailList',
    mixins:[JeecgListMixin, mixinDevice],
    components: {
      JDate,
      JSelectDepart,
      DetailModal
    },
    data () {
      return {
        orgName:store.getters.userInfo.departIds,
        dataTime:'',
        description: '发电详情管理页面',
        flag:true,
        day:[],
        mon:[],
        year:[],
        tabList: [
          {
            key: '1',
            tab: '日'
          },
          {
            key: '2',
            tab: '月'
          },
          {
            key: '3',
            tab: '年'
          }
        ],
        activeTabKey: '1',

        operation1: [
          {
            key: 'op1',
            type: '订购关系生效',
            name: '曲丽丽',
            status: 'agree',
            updatedAt: '2017-10-03  19:23:12',
            remark: '-'
          },
          {
            key: 'op2',
            type: '财务复审',
            name: '付小小',
            status: 'reject',
            updatedAt: '2017-10-03  19:23:12',
            remark: '不通过原因'
          },
          {
            key: 'op3',
            type: '部门初审',
            name: '周毛毛',
            status: 'agree',
            updatedAt: '2017-10-03  19:23:12',
            remark: '-'
          },
          {
            key: 'op4',
            type: '提交订单',
            name: '林东东',
            status: 'agree',
            updatedAt: '2017-10-03  19:23:12',
            remark: '很棒'
          },
          {
            key: 'op5',
            type: '创建订单',
            name: '汗牙牙',
            status: 'agree',
            updatedAt: '2017-10-03  19:23:12',
            remark: '-'
          }
        ],
        operation2: [
          {
            key: 'op2',
            type: '财务复审',
            name: '付小小',
            status: 'reject',
            updatedAt: '2017-10-03  19:23:12',
            remark: '不通过原因'
          },
          {
            key: 'op3',
            type: '部门初审',
            name: '周毛毛',
            status: 'agree',
            updatedAt: '2017-10-03  19:23:12',
            remark: '-'
          },
          {
            key: 'op4',
            type: '提交订单',
            name: '林东东',
            status: 'agree',
            updatedAt: '2017-10-03  19:23:12',
            remark: '很棒'
          }
        ],
        operation3: [
          {
            key: 'op2',
            type: '财务复审',
            name: '付小小',
            status: 'reject',
            updatedAt: '2017-10-03  19:23:12',
            remark: '不通过原因'
          },
          {
            key: 'op3',
            type: '部门初审',
            name: '周毛毛',
            status: 'agree',
            updatedAt: '2017-10-03  19:23:12',
            remark: '-'
          }
        ],
      
        // 表头
        columns: [
          {
            title: '#',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title:'风场名称',
            align:"center",
            dataIndex: 'orgName_dictText'
          },
          {
            title:'发电量',
            align:"center",
            dataIndex: 'maxelectricity'
          },
          {
            title:'时间',
            align:"center",
            dataIndex: 'datatime',
            customRender:function (text) {
              return !text?"":(text.length>10?text.substr(0,10):text)
            }
          },
          {
            title:'发电名称',
            align:"center",
            dataIndex: 'equipmentName'
          },
        ],
        url: {
          list: "/dtequipment/dtEquipment/list",
          delete: "/detail/detail/delete",
          deleteBatch: "/detail/detail/deleteBatch",
          exportXlsUrl: "/detail/detail/exportXls",
          importExcelUrl: "detail/detail/importExcel",
          day:'/dtcollectcontroller/dtCollectController/daylist',
          mon:'/dtcollectcontroller/dtCollectController/monlist',
          year:'/dtcollectcontroller/dtCollectController/yearlist'
          
        },
        dictOptions:{},
      }
    },
    created() {
    },
    computed: {
      importExcelUrl: function(){
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      },
    },
    methods: {
     onTabChange(key, type) {
      console.log(key, type);
      this[type] = key;
     
    },
      initDictConfig(){
      },
      changeOrgName(item){
        this.orgName = item
      },
      changeDataTime(item){
        this.dataTime = item
      },
      search(){
        this.flag = true
        this.day = []
        this.mon = []
        this.year = []
        var params={
          orgName:this.orgName,
          dataTime:this.dataTime
        }
         getAction(this.url.day,params).then(res => {
      for(var i=0; i<res.result.records.length;i++)
      this.day.push({
          address:res.result.records[i].address,
          orgName_dictText:res.result.records[i].orgName_dictText,
         maxelectricity:res.result.records[i].maxelectricity.substring(0,res.result.records[i].maxelectricity.indexOf(".")+3),
         equipmentName:res.result.records[i].equipmentName,
         datatime:res.result.records[i].dataTime,
      })
      console.log('day',this.day)
     this.flag = false
    })
     getAction(this.url.mon,params).then(res => {
      for(var i=0; i<res.result.records.length;i++)
      this.mon.push({
          address:res.result.records[i].address,
          orgName_dictText:res.result.records[i].orgName_dictText,
         maxelectricity:res.result.records[i].maxelectricity.substring(0,res.result.records[i].maxelectricity.indexOf(".")+3),
         equipmentName:res.result.records[i].equipmentName,
         datatime:res.result.records[i].createTime,
      })
       console.log('mon',this.mon)
    })
     getAction(this.url.year,params).then(res => {
      for(var i=0; i<res.result.records.length;i++)
      this.year.push({
          address:res.result.records[i].address,
          orgName_dictText:res.result.records[i].orgName_dictText,
         maxelectricity:res.result.records[i].maxelectricity.substring(0,res.result.records[i].maxelectricity.indexOf(".")+3),
         equipmentName:res.result.records[i].equipmentName,
         datatime:res.result.records[i].createTime,
      })
       console.log('year',this.year)
    })

      }
      
      
    },
    mounted(){
      this.dataTime = Time()
      var date = new Date();   
      var y = date.getFullYear();	//获取年份
      var M = date.getMonth()+1;	//获取月份
      var d = date.getDate();	//获取日期
      var params={
        orgName:store.getters.userInfo.departIds,
         dataTime: y+'-'+M+'-'+d
      }
      getAction(this.url.day,params).then(res => {
      for(var i=0; i<res.result.records.length;i++)
      this.day.push({
          address:res.result.records[i].address,
          orgName_dictText:res.result.records[i].orgName_dictText,
         maxelectricity:res.result.records[i].maxelectricity.substring(0,res.result.records[i].maxelectricity.indexOf(".")+3),
         equipmentName:res.result.records[i].equipmentName,
         datatime:res.result.records[i].dataTime,
      })
      console.log('day',this.day)
      this.flag = false
    })
     getAction(this.url.mon,params).then(res => {
      for(var i=0; i<res.result.records.length;i++)
      this.mon.push({
          address:res.result.records[i].address,
          orgName_dictText:res.result.records[i].orgName_dictText,
         maxelectricity:res.result.records[i].maxelectricity.substring(0,res.result.records[i].maxelectricity.indexOf(".")+3),
         equipmentName:res.result.records[i].equipmentName,
         datatime:res.result.records[i].createTime,
      })
       console.log('mon',this.mon)
    })
     getAction(this.url.year,params).then(res => {
      for(var i=0; i<res.result.records.length;i++)
      this.year.push({
          address:res.result.records[i].address,
          orgName_dictText:res.result.records[i].orgName_dictText,
         maxelectricity:res.result.records[i].maxelectricity.substring(0,res.result.records[i].maxelectricity.indexOf(".")+3),
         equipmentName:res.result.records[i].equipmentName,
         datatime:res.result.records[i].createTime,
      })
       console.log('year',this.year)
    })
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
  /*  @tabChange="(key) => {this.activeTabKey = key}" */
</style>